<template>
  <div class="si-search-form">
    <!-- 搜索区 -->
    <div class="search-form">
      <slot name="form">
        <el-form
          ref="si-search-form"
          :model="formData"
          :size="size"
          :inline="true"
          v-bind="formAttrs"
        >
          <el-form-item
            v-for="{ attrs, on, ...restProps } in formItems"
            :key="restProps.prop"
            :label="restProps.label"
            :prop="restProps.prop"
            class="formItem"
          >
            <!-- 输入框 -->
            <el-input
              v-if="restProps.type === 'Input' && !attrs['fetch-suggestions']"
              v-model="formData[restProps.prop]"
              v-bind="attrs"
              @change="
                ;(on && on.change && on.change(formData[restProps.prop])) ||
                  function() {}
              "
              @input="
                ;(on && on.input && on.input(formData[restProps.prop])) ||
                  function() {}
              "
              @blur="
                ;(on && on.blur && on.blur(formData[restProps.prop])) ||
                  function() {}
              "
              @focus="
                ;(on && on.focus && on.focus(formData[restProps.prop])) ||
                  function() {}
              "
            />
            <el-autocomplete
              v-if="restProps.type === 'Input' && attrs['fetch-suggestions']"
              v-model="formData[restProps.prop]"
              v-bind="attrs"
              @change="
                ;(on && on.change && on.change(formData[restProps.prop])) ||
                  function() {}
              "
              @input="
                ;(on && on.input && on.input(formData[restProps.prop])) ||
                  function() {}
              "
              @blur="
                ;(on && on.blur && on.blur(formData[restProps.prop])) ||
                  function() {}
              "
              @focus="
                ;(on && on.focus && on.focus(formData[restProps.prop])) ||
                  function() {}
              "
            />
            <!-- 下拉框 -->
            <el-select
              v-if="restProps.type === 'Select'"
              v-model="formData[restProps.prop]"
              v-bind="attrs"
              @change="
                ;(on && on.change && on.change(formData[restProps.prop])) ||
                  function() {}
              "
              @blur="
                ;(on && on.blur && on.blur(formData[restProps.prop])) ||
                  function() {}
              "
              @focus="
                ;(on && on.focus && on.focus(formData[restProps.prop])) ||
                  function() {}
              "
            >
              <el-option
                v-for="op in attrs.options"
                :key="op.value"
                :label="op.label"
                :value="op.value.toString()"
              />
            </el-select>
            <!-- 级联 -->
            <el-cascader
              v-if="restProps.type === 'Cascader'"
              v-model="formData[restProps.prop]"
              v-bind="attrs"
              @change="
                ;(on && on.change && on.change(formData[restProps.prop])) ||
                  function() {}
              "
              @blur="
                ;(on && on.blur && on.blur(formData[restProps.prop])) ||
                  function() {}
              "
              @focus="
                ;(on && on.focus && on.focus(formData[restProps.prop])) ||
                  function() {}
              "
            />
            <!-- 日期 -->
            <el-date-picker
              v-if="restProps.type === 'Date'"
              v-model="formData[restProps.prop]"
              v-bind="attrs"
              @change="
                ;(on && on.change && on.change(formData[restProps.prop])) ||
                  function() {}
              "
              @blur="
                ;(on && on.blur && on.blur(formData[restProps.prop])) ||
                  function() {}
              "
              @focus="
                ;(on && on.focus && on.focus(formData[restProps.prop])) ||
                  function() {}
              "
            />
            <!-- 时间 -->
            <el-time-select
              v-if="restProps.type === 'Time'"
              v-model="formData[restProps.prop]"
              v-bind="attrs"
              @change="
                ;(on && on.change && on.change(formData[restProps.prop])) ||
                  function() {}
              "
              @blur="
                ;(on && on.blur && on.blur(formData[restProps.prop])) ||
                  function() {}
              "
              @focus="
                ;(on && on.focus && on.focus(formData[restProps.prop])) ||
                  function() {}
              "
            />
          </el-form-item>
          <!-- 按钮 -->
          <el-form-item>
            <!-- <el-button
              v-for="(item, index) in formButtons"
              :key="index"
              :size="size"
              :loading="loading"
              v-bind="item.attrs"
              @click="
                ;(item.click && item.click(formData[item.prop])) ||
                  function() {}
              "
            >
              {{ item.label }}
            </el-button> -->
            <el-button
              type="primary"
              :loading="loading"
              @click="handleSubmit(1)"
            >
              查询
            </el-button>
            <el-button type="default" :loading="loading" @click="handleReset()">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </slot>
    </div>
    <!-- 操作区 -->
    <div class="search-operate">
      <slot name="search-operate" />
    </div>
    <!-- 查询结果区 -->
    <div class="search-table">
      <slot name="search-table">
        <el-table
          ref="si-search-table"
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          v-bind="tableAttrs"
          v-on="tableOn"
        >
          <template v-for="(item, index) in tableColumns">
            <el-table-column
              v-if="item.type === 'selection'"
              :key="index"
              width="55"
              type="selection"
            />
            <el-table-column v-else :key="index" v-bind="item">
              <template slot-scope="scope">
                <span v-if="item.render">{{ item.render(scope.row) }}</span>
                <slot
                  v-else-if="item.slotName"
                  :name="item.slotName"
                  :scope="scope"
                />
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </slot>
    </div>
    <!-- 翻页区 -->
    <div class="search-pagination">
      <el-pagination
        ref="si-search-pagination"
        background
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import clearFormDate from '@/utils/clearFormData'
export default {
  name: 'SiSearchForm',
  props: {
    // loading
    loading: {
      type: Boolean,
      required: true,
      default: false
    },
    // form 属性
    formAttrs: {
      type: Object,
      default: () => {}
    },
    // form 表单项
    formItems: {
      type: Array,
      default: () => []
    },
    // form 表单项对应数据
    formData: {
      type: Object,
      default: () => {}
    },
    tableColumns: {
      type: Array,
      required: true,
      default: () => []
    },
    tableData: {
      type: Array,
      required: true,
      default: () => []
    },
    tableAttrs: {
      type: Object,
      default: () => {}
    },
    tableOn: {
      type: Object,
      default: () => {}
    },
    size: {
      type: String,
      default: 'medium'
    },
    total: {
      type: Number,
      required: true,
      default: 0
    },
    // 是否立即查询
    immediateQuery: {
      type: Boolean,
      default: true
    },
    // 自定义页码，方便非点击，切换页码
    customPage: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    // currentPage: {
    //   get() {
    //     return this.page
    //   },
    //   set(val) {
    //     // this.$emit('update:page', val)
    //     this.page = val
    //   }
    // },
    // pageSize: {
    //   get() {
    //     return this.limit
    //   },
    //   set(val) {
    //     // this.$emit('update:limit', val)
    //     this.limit = val
    //   }
    // }
  },
  watch: {
    customPage: {
      handler(newData) {
        if (newData > 0) {
          this.handleCurrentChange(newData)
        }
      }
      // immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.immediateQuery) {
        this.handleSubmit()
      }
    })
  },
  methods: {
    handleSubmit(currentPage) {
      this.currentPage = currentPage || this.currentPage
      this.$emit('query', {
        param: this.formData,
        page: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
      })
    },
    handleReset() {
      clearFormDate(this.formData)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.handleSubmit()
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.handleSubmit()
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    f() {
      console.log('fffff')
    }
  }
}
</script>

<style lang="scss" scoped>
.si-search-form {
  .search-form {
    padding: 0 0 10px 0;
    border-bottom: 1px solid #ededed;
  }
  .search-operate {
    padding: 10px 0;
    // text-align: right;
  }
  .search-pagination {
    padding: 20px 0;
  }
}
</style>
